<template>
  <div
    class="roc-scale-box"
    ref="rocScaleBox"
    :style="props.backgroundTransparent?{
      ...style,
      width: props.width + 'px',
      height: props.height + 'px',
      backgroundColor: 'transparent',
      backgroundRepeat: 'no-repeat',
      backgroundSize: 'cover',
      overflow: 'hidden',
    }:{
      ...style,
      width: props.width + 'px',
      height: props.height + 'px',
      backgroundColor: props.bgColor,
      backgroundImage:'url('+props.bgImage+')',
      backgroundRepeat: 'no-repeat',
      backgroundSize: 'cover',
      overflow: 'hidden',
    }"
  >
    <slot></slot>
  </div>
</template>

<script setup lang="ts">
import {
  ref,
  reactive,
  onMounted,
  defineProps,
  watchEffect,
  defineEmits,
} from "vue";
import { debounce } from "./debounce.js";
import propsData from "./props.js";


const props = defineProps(propsData);
const emits = defineEmits(["scaleChange"]);
onMounted(() => {
  setScale();
  window.addEventListener("resize", debounce(setScale, props.delay));
  const resizeObserver = new ResizeObserver(entries => {
      //回调
      setScale()
  });

  //监听对应的dom
  resizeObserver.observe(rocScaleBox.value.parentNode);
  resizeObserver.observe(rocScaleBox.value);
});

const rocScaleBox = ref(null);
const style = reactive({
  position: "absolute",
  transform: "scale(var(--scale)) translate(-50%, -50%)",
  transformOrigin: "0 0",
  left: "50%",
  top: "50%",
  zIndex: 999,
});
// SHOW_ALL 
// 整个应用程序在指定区域可见，没有变形，同时保持原始纵横比，边框可能出现在画面的旁侧。
// FIXED_WIDTH 
// 该应用程序采用设计分辨率大小的宽度并修改内部画布的高度，使其适合设备的纵横比，不会发生变形但是您必须确保您的应用程序在不同的纵横比的设备下工作。
// FIXED_HEIGHT 
// 该应用程序采用设计分辨率大小的高度并修改内部画布的宽度，使其适合设备的纵横比，不会发生变形，但是您必须确保您的应用程序在不同的纵横比的设备下工作。
// EXACT_FIT 
// 整个应用程序在指定区域可见，无需尝试保留原始纵横比，可能会发生变形，出现画面拉伸或压缩。
switch(props.ResolutionPolicy){
   case "SHOW_ALL":
      // 等比缩放模式
      style["transform"] = "scale(var(--scale)) translate(-50%, -50%)";
    break;
   case "FIXED_WIDTH":
      // 宽度适配模式
   case "FIXED_HEIGHT":
      // 高度适配模式
   case "EXACT_FIT":
      // 拉伸模式
      style["transform"] =
      "scaleX(var(--scaleX)) scaleY(var(--scaleY)) translate(-50%, -50%)";
    break;
}
// if (props.isFlat) {
//   // 拉伸模式
//   style["transform"] =
//     "scaleX(var(--scaleX)) scaleY(var(--scaleY)) translate(-50%, -50%)";
// } else if(props.fixWidth){
//   // 拉伸模式
//   style["transform"] =
//     "scaleX(var(--scaleX)) scaleY(var(--scaleY)) translate(-50%, -50%)";
// } else if(props.fixHeight){
//   // 拉伸模式
//   style["transform"] =
//     "scaleX(var(--scaleX)) scaleY(var(--scaleY)) translate(-50%, -50%)";
// }
// else {
//   // 等比缩放模式
//   style["transform"] = "scale(var(--scale)) translate(-50%, -50%)";
// }

/**
 * 等比缩放比例 计算
 */
const scale = ref(0);
function getScale() {

  // const wh = window.innerHeight / props.height;
  // const ww = window.innerWidth / props.width;
  const wh = rocScaleBox.value.parentNode.clientWidth / props.height;
  const ww = rocScaleBox.value.parentNode.clientHeight / props.width;
  return ww < wh ? ww : wh;
}

/**
 * 不等比缩放比例 计算 X Y
 */
const scaleX = ref(0);
const scaleY = ref(0);
function getScaleX() {
  const ww = rocScaleBox.value.parentNode.clientWidth / props.width;
  return ww;
}
function getScaleY() {
  const wh = rocScaleBox.value.parentNode.clientHeight / props.height;
  return wh;
}


/**
 * 设置缩放值
 */
function setScale() {
  if (rocScaleBox.value) {
    switch(props.ResolutionPolicy){
       case "SHOW_ALL":
            // 等比缩放模式
            scale.value = getScale();
            rocScaleBox.value.style.setProperty("--scale", scale.value);
        break;
       case "FIXED_WIDTH":
           // 宽度适配模式
          scaleX.value = getScaleX();
          scaleY.value = scaleX.value
          rocScaleBox.value.style.setProperty("--scaleX", scaleX.value);
          rocScaleBox.value.style.setProperty("--scaleY", scaleY.value);
          break;
       case "FIXED_HEIGHT":
          // 高度适配模式
          scaleY.value = getScaleY();
          scaleX.value = scaleY.value

          rocScaleBox.value.style.setProperty("--scaleX", scaleX.value);
          rocScaleBox.value.style.setProperty("--scaleY", scaleY.value);
          break;
       case "EXACT_FIT":
          // 拉伸模式
          scaleX.value = getScaleX();
          scaleY.value = getScaleY();
          rocScaleBox.value.style.setProperty("--scaleX", scaleX.value);
          rocScaleBox.value.style.setProperty("--scaleY", scaleY.value);
        break;
    }
    // if (props.isFlat) {
    //   // 拉伸模式
    //   scaleX.value = getScaleX();
    //   scaleY.value = getScaleY();
    //   rocScaleBox.value.style.setProperty("--scaleX", scaleX.value);
    //   rocScaleBox.value.style.setProperty("--scaleY", scaleY.value);
    // } else if(props.fixWidth){
    //   // 宽度适配模式
    //   scaleX.value = getScaleX();
    //   scaleY.value = scaleX.value*(props.height/props.width);
    //   rocScaleBox.value.style.setProperty("--scaleX", scaleX.value);
    //   rocScaleBox.value.style.setProperty("--scaleY", scaleY.value);
    // } else if(props.fixHeight){
    //   // 高度适配模式
    //   scaleY.value = getScaleY();
    //   scaleX.value = scaleY.value*(props.width/props.height);
      
    //   rocScaleBox.value.style.setProperty("--scaleX", scaleX.value);
    //   rocScaleBox.value.style.setProperty("--scaleY", scaleY.value);
    // }
    // else {
    //   // 等比缩放模式
    //   scale.value = getScale();
    //   rocScaleBox.value.style.setProperty("--scale", scale.value);
    // }
  }
}

watchEffect(() => {
  setScale();
  let args;
  switch(props.ResolutionPolicy){
     case "SHOW_ALL":
        // 等比缩放模式
        args = scale.value;
      break;
     case "FIXED_WIDTH":
        // 宽度适配模式
     case "FIXED_HEIGHT":
        // 高度适配模式
     case "EXACT_FIT":
        // 拉伸模式
        args = [scaleX.value, scaleY.value];
      break;
  }
  switch(props.ResolutionPolicy){
   case "SHOW_ALL":
      // 等比缩放模式
      style["transform"] = "scale(var(--scale)) translate(-50%, -50%)";
    break;
   case "FIXED_WIDTH":
      // 宽度适配模式
   case "FIXED_HEIGHT":
      // 高度适配模式
   case "EXACT_FIT":
      // 拉伸模式
      style["transform"] =
      "scaleX(var(--scaleX)) scaleY(var(--scaleY)) translate(-50%, -50%)";
    break;
  }
  // if (props.isFlat) {
  //   args = [scaleX.value, scaleY.value];
  // } else if(props.fixWidth){
  //   // 宽度适配模式
  //   args = [scaleX.value, scaleY.value];
  // } else if(props.fixHeight){
  //   // 高度适配模式
  //   args = [scaleX.value, scaleY.value];
  // }else {
  //   args = scale.value;
  // }
  emits("scaleChange", args);
});
const curGroupId = ref('')

defineExpose({
rocScaleBox
})
</script>
<script lang="ts">
export default {
name: 'renderContainer'
}
</script>